import { Component, OnInit, OnChanges, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-event-scatter-aqi-chart',
  templateUrl: './event-scatter-aqi-chart.component.html',
  styleUrls: ['./event-scatter-aqi-chart.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class EventScatterAqiChartComponent implements OnChanges {
  @Input() dataSeries;
  @Input() givenHeight = '400px';
  @Input() givenXAxisNumber = 100;
  @Input() givenYAxisNumber = 7;
  @Input() givenXAxis;
  @Input() givenYAxis;

  options = {};

  getHeight() {
    return this.givenHeight;
  }

  constructor() { }

  ngOnChanges(): void {
    this.options = {
      color: [
        '#dd4444', '#fec42c', '#80F1BE'
      ],
      // backgroundColor: 'rgba(64, 74, 89, .98)',
      tooltip: {
        padding: 10,
        backgroundColor: '#222',
        borderColor: '#777',
        borderWidth: 1,
        confine: true,
        formatter: function (params) {
          return "<div style='display: block;word-break: break-all;word-wrap: break-word;white-space: pre-wrap'>" + '文章'+ params.data[3] + "</div>"  + '<br/>' + '情感指数：' + params.data[0] + '<br/>' + 'GJ次数: ' + params.data[1];
        }
      },
      legend: {
        // textStyle: {
        //   color: '#ffffff'
        // }
      },
      xAxis: {
        type: 'value',
        name: this.givenXAxis,
        nameLocation: "middle",
        nameGap: 30,
        nameTextStyle: {
          fontSize: 12
        },
        max: this.givenXAxisNumber,
        splitLine: {
          show: false
        },
        // axisLine: {
        //   lineStyle: {
        //     color: ['#ffffff'],
        //   }
        // }
      },
      yAxis: {
        type: 'value',
        name: this.givenYAxis,
        nameLocation: 'end',
        nameGap: 20,
        nameTextStyle: {
          fontSize: 12
        },
        max: this.givenYAxisNumber,
        splitLine: {
          show: false
        },
        // axisLine: {
        //   lineStyle: {
        //     color: ['#ffffff'],
        //   }
        // }
      },
      visualMap: [
        {
          left: 'right',
          top: '-100%',
          dimension: 2,
          textStyle: {
            color: '#fff'
          },
          inRange: {
            symbolSize: [20, 400]
          },
          outOfRange: {
            symbolSize: [40, 120],
            color: ['rgba(255,255,255,.2)']
          },
        },
      ],
      series: this.dataSeries
    };
  }
}
